11.2 精通自定义 View 之 Matrix 与坐标变换——ColorMatrix 色彩变换

发表于 | 分类于 |

返回自定义 View 目录

11.2.1 色彩变换矩阵

对于色彩的存储，Bitmap 类使用一个 32 位的数值来保存，红、绿、蓝及透明度各占 8 位，每个色彩分量的取值范围是 0~255。透明度为 0 表示完全透明，为 255 时色彩完全可见。

1. 色彩信息的矩阵表示

由于一个色彩信息包含 R、G、B、Alpha 信息,所以,我们必然要使用一个四阶色彩变 换矩阵来修改色彩的每一个分量值。

注意:对于色彩变换矩阵，这里的色彩顺序是 R、G、B、A，而不是 A、R、G、B。

如果想将色彩 (0,255,0,255) 更改为半透明，则可以使用下面的矩阵运算来表示：

上面使用四阶矩阵完全可以改变图片的 RGBA 值，但考虑一种情况：如果我们只想在原有的 R 色上增加一些分量呢?

这时，我们就得再多加一阶来表示平移变换。所，一个既包含线性变换又包含平移变换的组合变换称为仿射变换。使用四阶色彩变换矩阵来修改色彩，只能对色彩的每个分量值进行乘(除)运算。如果要对这些分量值进行加减法运算(平移变换)，则只能通过五阶矩阵来完成。

考虑下面这个变换：
1）红色分量值更改为原来的 2 倍。
2）绿色分量值增加 100。

这个变换使用四阶矩阵的乘法无法实现。所以，应该在四阶色彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算。

在这个矩阵中，分量值用的是 100。

2. Android 中的色彩变换矩阵

在 Android 中，色彩变换矩阵的表示形式也是五阶的。所以，在默认情况下，色彩变换矩阵的形式如下:

Android 中的色彩变换矩阵是用 ColorMatrix 类来表示的。使用 ColorMatrix 类的方法如下:

1
2
3
4
5
6
7
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
       1, 0, 0, 0, 0,
       0, 1, 0, 0, 0,
       0, 0, 1, 0, 0,
       0, 0, 0, 0.5, 0,
});
mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));

有关 setColorFilter() 函数的其他用法，将在本节末尾详细讲解。

3. 示例：彩色图片的蓝色通道输出

下面以为 Bitmap 应用 ColorMatrix 类为例,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class TestView extends View {
    private Paint mPaint = new Paint();
    private Bitmap bitmap;  // 位图
    private Rect rect;
    private ColorMatrixColorFilter colorMatrixColorFilter;
    public TestView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint.setAntiAlias(true);
        // 获取位图
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.dog);
        rect = new Rect();
        // 生成色彩变换矩阵
        ColorMatrix colorMatrix = new ColorMatrix(new float[]{
                0, 0, 0, 0, 0,
                0, 0, 0, 0, 0,
                0, 0, 1, 0, 0,
                0, 0, 0, 1, 0,
        });
        colorMatrixColorFilter = new ColorMatrixColorFilter(colorMatrix);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        rect.set(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth());
        // 绘制原始位图
        canvas.drawBitmap(bitmap, null, rect, mPaint);
        canvas.translate(510, 0);
        mPaint.setColorFilter(colorMatrixColorFilter);
        canvas.drawBitmap(bitmap, null, rect, mPaint);
    }
}

这里分两次绘制了一个 Bitmap，先绘制了一个原始图像,然后利用 ColorMatrix 类生成了 一个仅包含蓝色的图像。用过 Photoshop 的读者应该很清楚,这跟 Photoshop 中蓝色通道的效 果是一致的。效果如下图所示。

11.2.2 色彩的几种运算方式

1. 色彩的平移运算

1）增加色彩饱和度
色彩的平移运算实际上就是色彩的加法运算，其实就是在色彩变换矩阵的最后一列加上某个值，这样可以增加特定色彩的饱和度。

比如，同样是上面的图片，我们给它应用下面的色彩值。

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
       1, 0, 0, 0, 0,
       0, 1, 0, 0, 50,
       0, 0, 1, 0, 0,
       0, 0, 0, 1, 0,
});

在绿色值上添加增量 50，即增大绿色的饱和度。效果如下图所示。

同样，左侧是原图，右侧是增大绿色饱和度后的效果。大家要特别注意的是，由于图片是由一个个像素组成的，所以用每个像素所对应的色彩数组来乘以色彩变换矩阵，结果就是变换后的当前点的颜色值。在应用 ColorMatrix 类后，图片中每个像素的绿色值都增加了 50, 从小狗的脸上也可以看出来。

2）色彩反转/反相功能
色彩平移除增加指定色彩的饱和度以外，另一个应用就是色彩反转，也就是 Photoshop 中的反相功能。色彩反转就是求出每个色彩的补值来作为目标图像的对应颜色值。示例代码如下：

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        -1, 0, 0, 0, 255,
        0, -1, 0, 0, 255,
        0, 0, -1, 0, 255,
        0, 0, 0, 1, 0,
});

2. 色彩的缩放运算

1）调节亮度
色彩的缩放运算其实就是色彩的乘法运算。将色彩变换矩阵对角线上分别代表 R、G、B、 A 的几个值分别乘以指定的值，就是所谓的缩放运算，如下图所示。

我们可以针对某个颜色值进行放大/缩小运算。但是当对 R、G、B、A 同时进行放大/缩小运算时，就是对亮度进行调节。

看下面将亮度增大 1.2 倍的代码：

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        1.2f, 0, 0, 0, 0,
        0, 1.2f, 0, 0, 0,
        0, 0, 1.2f, 0, 0,
        0, 0, 0, 1, 0,
});

2）通道输出
由于在色彩变换矩阵中对角线上的数的取值范围为 0~1，所以，当取 0 时，这个色彩就完全不显示；当 R、G 都取 0，而独有 B 取 1 时,就只显示蓝色，所形成的图像也就是我们通常所说的蓝色通道。看一下几个通道输出的效果图，如下图所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 红色通道矩阵
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        1, 0, 0, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 0, 1, 0,
});
// 绿色通道矩阵
ColorMatrix colorMatrix2 = new ColorMatrix(new float[]{
        0, 0, 0, 0, 0,
        0, 1, 0, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 0, 1, 0,
});
// 蓝色通道矩阵
ColorMatrix colorMatrix3 = new ColorMatrix(new float[]{
        0, 0, 0, 0, 0,
        0, 0, 0, 0, 0,
        0, 0, 1, 0, 0,
        0, 0, 0, 1, 0,
});

3. 色彩的旋转运算

RGB 色是如何旋转的呢？首先用 R、G、B 三色建立立体坐标系，如下图所示。

所以，我们可以把一个色彩值看成三维空间里的一个点，色彩值的三个分量可以看成该点的坐标(三维坐标)。我们先不考虑在三个维度综合情况下是怎么旋转的，来看看将某个轴作为 Z 轴，在另外两个轴形成的平面上旋转的情况。下图分析了将蓝色轴作为 Z 轴，仅在红 — 绿平面上旋转 a 度的情况。

可以看到，在旋转后，原 R 在 R 轴上的分量变为原 Rxcosa，原 G 在 R 轴上也有了分量，但分量落在了负轴上，所以要减去这部分分量，最终的结果是最终的 R=原 R×cosa-原 G×sina。 下面来看一下几种旋转计算及结果矩阵(注意：这几张图只标记了原 X 轴色彩分量的旋转，没有把 Y 轴色彩分量的旋转标记出来)。

1）绕蓝色轴旋转 θ 度

对应的色彩变换矩阵如下：

2）绕红色轴旋转 θ 度

对应的色彩变换矩阵如下：

3）绕绿色轴旋转 θ 度

对应的色彩变换矩阵如下：

当围绕红色轴进行色彩旋转时，由于当前红色轴的色彩是不变的,而仅利用三角函数来动态变更绿色和蓝色的颜色值，这种改变就叫作色相调节。当围绕红色轴旋转时，是对图片进行红色色相的调节；当围绕蓝色轴旋转时，是对图片进行蓝色色相的调节；当围绕绿色轴旋转时，是对图片进行绿色色相的调节。

下面我们会再次讲到 ColorMatrix 的色彩旋转函数，这里先理解原理，代码和效果后面会给出。

4. 色彩的投射运算

我们再回过头来看看色彩变换矩阵运算的公式，如下：

在上式中，把红色运算单独标记出来。在运算中，它们就是利用 G、B、A 的颜色值的分量来增加红色值的。

来看具体的运算：

注意：最终结果的 220=0.2×100+1×200，可见绿色分量在原有绿色分量的基础上增加了红色分量值的 0.2 倍。利用其他色彩分量的倍数来更改自己色彩分量的值，这种运算就叫作投射运算。

在对下图中阴影部分的值进行修改时，所使用的增加值来自其他色彩分量的信息。

应用一：黑白图片
色彩投射的一个最简单的应用就是将彩色图片变为黑白图片。代码如下：

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        0.213f, 0.715f, 0.072f, 0, 0,
        0.213f, 0.715f, 0.072f, 0, 0,
        0.213f, 0.715f, 0.072f, 0, 0,
        0, 0, 0, 1, 0,
});

首先了解一下去色原理：只要把 R、G、B 三通道的色彩信息设置成一样，即 R=G=B，图像就变成了灰色。并且，为了保证图像亮度不变，同一个通道中的 R+G+B=1，如 0.213+0.715+0.072=1。

下面谈一下 0.213、0.715、0.072 这三个数字的由来。

按理说应该把 R、G、B 平分，都是 0.3333333。三个数字应该是根据色彩光波频率及色彩心理学计算出来的。

在作用于人眼的光线中，彩色光要明显强于无色光。如果对一张图像按 RGB 平分理论给图像去色，人眼就会明显感觉到图像变暗了(当然可能有心理上的原因，也有光波的科学依据)。另外，在彩色图像中能够识别的一些细节也可能会丢失。

所以 Google 最终给出的颜色值就是上面的三个数字：0.213、0.715、0.072。我们在给图像去色时保留了大量的 G 通道信息，使得图像不至于变暗或者绿色信息不至于丢失。

应用二：色彩反色
利用色彩变换矩阵将两个颜色反转，这种操作就叫作色彩反色。比如，将红色和绿色反色(红绿反色)，代码如下：

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        0, 1, 0, 0, 0,
        1, 0, 0, 0, 0,
        0, 0, 1, 0, 0,
        0, 0, 0, 1, 0,
});

左侧为原图，右侧为红绿反色以后的效果图。

从色彩变换矩阵中可以看出，红绿反色的关键在于，第一行用绿色来代替红色，第二行用红色来代替绿色。类似的可以有红蓝反色、绿蓝反色等，对应矩阵难度不大，就不再细讲了。

应用三：照片变旧
投射运算的另一个应用是照片变旧，其对应的矩阵如下：

1
2
3
4
5
6
ColorMatrix colorMatrix = new ColorMatrix(new float[]{
        1/2f, 1/2f, 1/2f, 0, 0,
        1/3f, 1/3f, 1/3f, 0, 0,
        1/4f, 1/4f, 1/4f, 0, 0,
        0, 0, 0, 1, 0,
});

11.2.3 ColorMatrix 函数

上一小节讲述了利用色彩变换矩阵来进行的一些运算，但这些都是需要特定的色彩设计基础的。在 Android 中，ColorMatrix 自带一些函数，用来帮助我们完成调整饱和度、色彩旋转等操作。

1. 构造函数

ColorMatrix 共有三个构造函数，如下：

1
2
3
ColorMatrix()
ColorMatrix(float[] src)
ColorMatrix(ColorMatrix src)

在这三个构造函数中，我们已经使用过第二个构造函数；至于第三个构造函数，就是利用另一个 ColorMatrix 实例来复制一个一样的 ColorMatrix 对象。

2. 设置和重置函数

第一个构造函数 ColorMatrix() 需要与其他函数共用才行。

1
2
3
public void set(ColorMatrix src)
public void set(float[] src)
public void reset()

上面的函数是设置和重置函数，重置后，对应的数组如下：

1
2
3
4
5
6
7
/**
 * Set this colormatrix to identity: 
 * [ 1 0 0 0 0   -redvector
 *   0 1 0 0 0   -greenvector
 *   0 0 1 0 0   -bluevector
 *   0 0 0 1 0 ] -alphavector
 */

3. setSaturation() 函数——设置饱和度

我们可以通过色彩的平移运算单独增强 R、G、B 其中一个分量的饱和度，但当我们需要整体增强色彩饱和度时，需要如何来做呢？ ColorMatrix 提供了一个函数来整体增强色彩饱和度，如下：

1
2
// 整体增强色彩饱和度，即同时增强 R、G、B 的色彩饱和度 
public void setSaturation(float sat)

其中，参数 float sat 表示把当前色彩饱和度放大的倍数。当取值为 0 时，表示完全无色彩，即灰度图像(黑白图像)；当取值为 1 时，表示色彩不变动；;当取值大于 1 时，显示色彩过度饱和。

举个例子：滑块默认在 1 倍的位置，向左到底是 0，向右到底是 20(饱和度放大 20 倍)。

布局非常简单，下面是一张图片，上面是一个 SeekBar，核心处理代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class MainActivity extends AppCompatActivity {
    private SeekBar mSeekBar;
    private ImageView mImageView;
    private Bitmap mOriginBmp, mTempBmp;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        mImageView = findViewById(R.id.img);
        mSeekBar = findViewById(R.id.seek_bar);
        mOriginBmp = BitmapFactory.decodeResource(getResources(), R.drawable.meinv);
        mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);
        mSeekBar.setMax(20);
        mSeekBar.setProgress(1);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Bitmap bitmap = handleColorMatrixBmp(progress);
                mImageView.setImageBitmap(bitmap);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });
    }
    private Bitmap handleColorMatrixBmp(int progress){
        // 创建一个相同尺寸的可变的位图区，用于绘制调色后的图片
        Canvas canvas = new Canvas(mTempBmp);
        // 得到画笔对象
        Paint paint = new Paint();
        ColorMatrix mSaturationMatrix = new ColorMatrix();
        mSaturationMatrix.setSaturation(progress);
        // 设置色彩变换效果
        paint.setColorFilter(new ColorMatrixColorFilter(mSaturationMatrix));
        // 将色彩变换后的图片输出到新创建的位图区
        canvas.drawBitmap(mOriginBmp, 0, 0, paint);
        // 返回新的位图,即调色处理后的图片
        return mTempBmp;
    }
}

布局：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#EEE">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="饱和度"/>
        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/meinv"/>
</LinearLayout>

4. setScale() 函数——色彩缩放

1
public void setScale(float rScale, float gScale, float bScale,float aScale)

这个函数共有 4 个参数，分别对应 R、G、B、A 颜色值的缩放倍数。比如，在小狗图片中,绿色占大部分，所以我们仅将绿色放大 1.3 倍。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class TestView extends View {
    private Paint mPaint = new Paint();
    private Bitmap bitmap;  // 位图
    private Rect rect;
    private ColorMatrixColorFilter colorMatrixColorFilter;
    public TestView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint.setAntiAlias(true);
        // 获取位图
        bitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.dog);
        rect = new Rect();
        // 生成色彩变换矩阵
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.setScale(1,1.3f,1,1);
        colorMatrixColorFilter = new ColorMatrixColorFilter(colorMatrix);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        rect.set(0, 0, 500, 500 * bitmap.getHeight() / bitmap.getWidth());
        // 绘制原始位图
        canvas.drawBitmap(bitmap, null, rect, mPaint);
        canvas.translate(510, 0);
        mPaint.setColorFilter(colorMatrixColorFilter);
        canvas.drawBitmap(bitmap, null, rect, mPaint);
    }
}

5. setRotate() 函数——色彩旋转

上面在讲解色彩旋转运算时，列出了在色彩旋转时的效果和原理。由于涉及正、余弦函数的计算，而且这些公式推导起来具有一定的难度，所以 Android 已经封装好了色彩旋转的函数。

1
2
3
4
5
6
7
/**
 * 将旋转围绕某一个颜色轴进行
 * axis=0 围绕红色轴旋转
 * axis=1 围绕绿色轴旋转
 * axis=2 围绕蓝色轴旋转
 */
public void setRotate(int axis, float degrees);

  • int axis：表示围绕哪个轴旋转，取值为0、1、2。当取值为 0 时，表示围绕红色轴旋转；当取值为 1 时，表示围绕绿色轴旋转；当取值为 2 时，表示围绕蓝色轴旋转。
  • float degrees：表示旋转的度数。

同样利用上面色彩旋转的图像和滑动条的框架，来看一下当围绕某一个颜色轴旋转时色相变化的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class MainActivity extends AppCompatActivity {
    private SeekBar mSeekBar;
    private ImageView mImageView;
    private Bitmap mOriginBmp, mTempBmp;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.act_main);
        mImageView = findViewById(R.id.img);
        mSeekBar = findViewById(R.id.seek_bar);
        mOriginBmp = BitmapFactory.decodeResource(getResources(), R.drawable.meinv);
        mTempBmp = Bitmap.createBitmap(mOriginBmp.getWidth(), mOriginBmp.getHeight(), Bitmap.Config.ARGB_8888);
        mSeekBar.setMax(360);
        mSeekBar.setProgress(180);
        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Bitmap bitmap = handleColorMatrixBmp(progress);
                mImageView.setImageBitmap(bitmap);
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });
    }
    private Bitmap handleColorMatrixBmp(int progress) {
        Canvas canvas = new Canvas(mTempBmp);
        Paint paint = new Paint();
        ColorMatrix colorMatrix = new ColorMatrix();
        colorMatrix.setRotate(0,progress - 180);
        paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
        canvas.drawBitmap(mOriginBmp, 0, 0, paint);
        return mTempBmp;
    }
}

将当前 progress 位置减去 180，即中间位置的数字。所以，中间位置的色彩旋转度数为 0，整个旋转度数的范围是 -180°~180°；360° 正好是正/余弦函数的一个最小正周期。

上面的效果针对的是红色色相。同理，可以得到围绕绿色轴旋转的效果图。

11.2.4 ColorMatrix 相乘

矩阵相乘涉及三个函数。

1
public void setConcat(ColorMatrix matA, ColorMatrix matB)

这个函数接收两个 ColorMatrix 矩阵 matA 和 matB，乘法规则为 matA×matB，然后将结果作为当前 ColorMatrix 的值。

1
public void preConcat(ColorMatrix preMatrix)

假设当前矩阵为 A，那么 preConcat() 函数的含义就是将当前的矩阵 A 乘以 preMatrix。

1
public void postConcat(ColorMatrix postMatrix)

postConcat() 函数的含义就是 postMatrix 乘以当前矩阵 A。

由于这部分内容基本用不到，有关这几个函数的具体应用这里就不再详细讲述，有兴趣的读者可以参考 Paint 之 ColorMatrix 与滤镜效果。